<template>
  <div class="vm_container">
    <div class="table_operate flex_between_aligncenter">
      <div class="flex_center">
        <ga-input-group>
          <ga-select
            v-model="searchKey"
            :options="['IP地址', '名称', '项目', '归属人']"
            :style="{ width: '100px' }"
          />
          <ga-input style="width: 340px" placeholder="请输入内容" />
        </ga-input-group>
        <RefreshBotton @handleRefresh="fetchData" />
      </div>
      <div class="btns_box">
        <ga-button :type="isdisable ? 'secondary' : 'primary'" :disabled="isdisable">
          开机
        </ga-button>
        <ga-button
          style="margin: 0 8px"
          :type="isdisable ? 'secondary' : 'primary'"
          :disabled="isdisable"
        >
          关机
        </ga-button>
        <ga-button :type="isdisable ? 'secondary' : 'primary'" :disabled="isdisable">
          重启
        </ga-button>
        <ga-button
          style="margin: 0 8px"
          :type="isdisable ? 'secondary' : 'primary'"
          :disabled="isdisable"
        >
          销毁
        </ga-button>
        <ga-dropdown @select="handleSelect" v-if="isShowBtn">
          <ga-button
            :type="isdisable ? 'secondary' : 'primary'"
            :disabled="isdisable"
            style="margin-right: 8px"
            >调整虚机归属
            <icon-down style="margin-left: 8px" />
          </ga-button>
          <template #content>
            <ga-doption>调整用户</ga-doption>
            <ga-doption>调整项目</ga-doption>
          </template>
        </ga-dropdown>
        <ga-button type="primary" :disabled="isdisable" :loading="false">同步</ga-button>
      </div>
    </div>
    <!-- <ga-table-tool
      input-width="320px"
      placeholder="请输入内容"
      @handle-search="onSearch"
      @handle-refresh="fetchData"
      :columns="columns"
      :showSetColumn="showSetColumn"
      :showDownload="showDownload"
      @handleSubColumnSetting="(val) => $emit('handleSubColumnSetting', val)"
      @handleDownload="handleDownload"
    >
      <template #btns>
        <ga-button type="primary" :disabled="isdisable">开机</ga-button>
        <ga-button type="primary" :disabled="isdisable" style="margin: 0 8px"
          >关机</ga-button
        >
        <ga-button type="primary" :disabled="isdisable">重启</ga-button>
        <ga-button type="primary" :disabled="isdisable" style="margin: 0 8px"
          >销毁</ga-button
        >
        <ga-dropdown @select="handleSelect">
          <ga-button type="primary" :disabled="isdisable" style="margin-right: 8px"
            >调整虚机归属
            <icon-down style="margin-left: 8px" />
          </ga-button>
          <template #content>
            <ga-doption>调整用户</ga-doption>
            <ga-doption>调整项目</ga-doption>
          </template>
        </ga-dropdown>
        <ga-button type="primary" :disabled="isdisable" :loading="false">同步</ga-button>
      </template>
    </ga-table-tool> -->
    <div class="content_info">
      <ga-table
        row-key="id"
        :loading="loading"
        :pagination="false"
        :columns="columns"
        :data="tableData"
        :bordered="false"
        :hoverable="false"
        :scroll="isScroll ? scroll : false"
        :row-selection="rowSelection"
        @selection-change="handleSelectionchange"
      >
        <template #name="{ record }">
          <LinkText
            :labelStyle="{ color: '#0f5ef7', cursor: 'pointer' }"
            :label="record?.name"
            :desc="record?.instanceName || '-'"
            @click="$emit('findDetail', record)"
          />
        </template>
        <template #action="{ record }">
          <actionOpt :record="record" @fetchData="fetchData" v-if="isShowBtn" />
          <slot :record="record" v-else />
        </template>
      </ga-table>
      <Pagination
        v-if="total > 0"
        :total="total"
        :page="listQuery.page"
        :limit="listQuery.limit"
        @pagination="handlePagination"
      />
    </div>
  </div>
</template>

<script setup>
import { onMounted, reactive, ref, toRefs, computed } from "vue";
import { Message } from "@garco-design/web-vue";
import useLoading from "@/hooks/loading";
import LinkText from "@/components/LinkText/index.vue";
import { vmcolumns } from "./columns.js";
import actionOpt from "./actionOpt.vue";

const { loading, setLoading } = useLoading(false);
const total = ref(0);
const searchKey = ref("IP地址");
const selectedKeys = ref([]);
const scroll = {
  x: 1800,
};
const rowSelection = reactive({
  type: "checkbox",
  width: 30,
  showCheckedAll: true,
});
const tableData = ref([]);
const listQuery = reactive({
  page: 1,
  limit: 10,
  search: "",
});
const isdisable = computed(() => selectedKeys.value?.length === 0);
const props = defineProps({
  // 请求地址
  apiUrl: {
    type: String,
    default: "",
  },
  // 表格列数
  columns: {
    type: Array,
    default: () => vmcolumns,
  },
  // 请求其他参数
  otherParams: {
    type: String,
    default: "",
  },
  isShowBtn: {
    type: Boolean,
    default: true,
  },
  isScroll: {
    type: Boolean,
    default: true,
  },
  // 是否显示分页
  isShowPagination: {
    type: Boolean,
    default: true,
  },
  showSetColumn: {
    type: Boolean,
    default: false,
  },
  showDownload: {
    type: Boolean,
    default: false,
  },
});
const { apiUrl, otherParams } = toRefs(props);
// 列表
const fetchData = async () => {
  setLoading(true);
  try {
    const { data, code } = await apiUrl.value(listQuery, otherParams.value);
    if (code === 20000) {
      tableData.value = data?.items || data || [];
      total.value = data?.total;
    }
  } catch (err) {
    console.log(err);
  } finally {
    setLoading(false);
  }
};
// 处理行选择方法
const handleSelectionchange = (val) => {
  console.log("handleSelectionchange", val);
  selectedKeys.value = val;
  //  console.log('selectedKeys',selectedKeys.value);
};
// 处理方法
const handleDownload = (method) => {
  method(tableData.value, props.columns);
};
// 搜索
const onSearch = (val) => {
  listQuery.search = val;
  fetchData();
};
// 分页
const handlePagination = (val) => {
  listQuery.page = 1;
  const { page, limit } = val;
  listQuery.limit = Number(limit);
  listQuery.page = Number(page);
  fetchData();
};
onMounted(() => {
  fetchData();
});
defineExpose({ fetchData });
</script>

<style lang="scss" scoped>
:deep(.garco-btn-secondary.garco-btn-disabled, .garco-btn-secondary[type="button"].garco-btn-disabled) {
  background-color: #edf0f4;
}
</style>
